<template>
  <div class="basic-left" :style="{ height: height, width: width }">
    <ul>
      <li
        :class="item.id == activeRef ? 'active' : ''"
        v-for="(item, index) in dataSource"
        :key="index"
        @click="changeActive(item, index)"
      >
        <img
          class="mr-2"
          :src="item.id === activeRef ? item.urlActive : item.url"
          v-if="item.url"
        />
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts" name="BasicLeft">
  import { defineComponent, computed } from 'vue';

  export default defineComponent({
    name: 'BasicLeft',
    components: {},
    props: {
      height: {
        type: [String] as PropType<string>,
        default: 'calc(100vh - 76px)',
      },

      width: {
        type: [String] as PropType<string>,
        default: '224px',
      },
      dataSource: {
        type: Array as PropType<any>,
        default: () => [{ id: 1, name: '1223' }],
      },
      active: [String, Number],
    },
    emits: ['update:active', 'change'],
    setup(props, { emit }) {
      const activeRef = computed({
        get: () => {
          return props.active;
        },
        set: (v) => {
          emit('update:active', v);
        },
      });

      const changeActive = (item, idx) => {
        if (activeRef.value === item.id) return;
        emit('change', item, idx);
        activeRef.value = item.id;
      };
      return {
        activeRef,
        changeActive,
      };
    },
  });
</script>
<style lang="less" scoped>
  .basic-left {
    background: url(../../../../../assets/images/bpmn-process/bpmn-left-bg.png) no-repeat;
    background-position: right bottom;
    background-size: cover;

    ul {
      padding-top: 8px;

      li {
        width: 208px;
        height: 44px;
        line-height: 44px;
        margin: 0px 8px 10px;
        padding-left: 8px;
        opacity: 1;
        font-size: 14px;
        font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
        font-weight: 400;
        color: #1f2329;
        cursor: pointer;
        display: flex;
        align-items: center;
      }

      .active {
        background: rgba(43, 99, 161, 0.05);
        opacity: 1;
        font-size: 14px;
        font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
        font-weight: 400;
        color: #2b63a1;
      }
    }
  }
</style>
